/**
 * Created by thomas on 2017/5/7.
 */
/**
 * Created by thomas on 2017/5/2.
 */
import React,{Component} from 'react';
class Height extends React.Component{
    constructor(props) {
        super(props);
        this.state= {
            first:true,
            fix_num:0.1,
            height:1,
            reduce:375-document.body.clientWidth
        };
        this.change_ul=this.change_ul.bind(this);
        this.change_num=this.change_num.bind(this);
    }
    change_ul(e){
        sessionStorage.setItem("height",this.refs.num.innerText);
        this.props.get_dot(4);
        this.props.history.push(e);
    }
    componentDidMount(){
        let reduce=375-document.body.clientWidth;
        this.refs.move_img.scrollLeft=(515+reduce/2).toFixed(1);
    }
    change_num(){
        let  reduce_num = ((515+this.state.reduce/2- this.refs.move_img.scrollLeft)/10).toFixed(1);
        if(this.state.first === true){
            this.refs.num.innerText=150;
            this.setState({
                first:false
            });
            return
        }
        this.refs.num.innerText=150+(-reduce_num);
    }
    render() {
        return (
            <div className="Cart_container">
                <div className="Cart_top_contain">
                    <div className="Cart_top_name">
                        你的身高
                    </div>
                    <div className="weight_num">
                        <span className="num_w" ref="num">150</span>
                        <span className="w_i">cm</span>
                    </div>
                    <div id="triangle-down"></div>
                </div>
                <div className="move_cart" ref="move_img" onScroll={()=>{this.change_num()}} >
                    <div className="inner_move_img_height">
                        <img src={sessionStorage.getItem("img_path")+"/height.jpg?1"} alt="" className="inner_move_img_height_img"/>
                    </div>
                    {/*<img src="../static/weight.jpg" alt="" className="move_img"/>*/}
                </div>
                <div onClick={() =>this.change_ul("/tacos/Age")} className="next_step">下一步</div>
            </div>
        );
    }
}
export default Height;
